import React, { useEffect, useState, useCallback, useMemo } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import HomeImg from "../../assets/icon/common_tab_home_n.png";
import HomeImg_active from "../../assets/icon/common_tab_home_s.png";
import VideoImg from "../../assets/icon/common_tab_video_n.png";
import VideoImg_active from "../../assets/icon/common_tab_video_s.png";
import PatientCircle from "../../assets/icon/common_tab_circle_n.png";
import PatientCircle_active from "../../assets/icon/common_tab_circle_s.png";
import "./index.css";

// 标签页枚举定义
enum TabIndex {
  HOME = 0,
  PATIENT_CIRCLE = 1,
  VIDEO = 2,
  PATIENT_CIRCLE_WRITE = 4
}

// 标签页配置接口
interface TabItem {
  index: TabIndex;
  path: string;
  icon: string;
  activeIcon: string;
  className: string;
}

const TabbarComponent: React.FC = React.memo(() => {
  const [activeNum, setActiveNum] = useState<number>(0);
  const [patientCircleMode, setPatientCircleMode] = useState<boolean>(false);
  const navigate = useNavigate();
  const { pathname } = useLocation();

  // 标签页配置
  const tabItems = useMemo((): TabItem[] => [
    {
      index: TabIndex.HOME,
      path: "/",
      icon: HomeImg,
      activeIcon: HomeImg_active,
      className: "HomeImg"
    },
    {
      index: TabIndex.PATIENT_CIRCLE,
      path: "/BpatientCircle/BpatientCircleHome",
      icon: PatientCircle,
      activeIcon: PatientCircle_active,
      className: "PatientCircle"
    },
    {
      index: TabIndex.VIDEO,
      path: "/CvideoPage",
      icon: VideoImg,
      activeIcon: VideoImg_active,
      className: "VideoImg"
    }
  ], []);

  // 根据路径获取当前标签页索引
  const getCurrentTabIndex = useCallback((path: string): number => {
    if (path === "/") return TabIndex.HOME;
    if (path.includes("/BpatientCircle/BpatientCircleHome")) return TabIndex.PATIENT_CIRCLE;
    if (path.includes("/BpatientCircle/BpatientCircleWrite")) return TabIndex.PATIENT_CIRCLE;
    if (path.includes("/CvideoPage")) return TabIndex.VIDEO;
    return TabIndex.HOME;
  }, []);

  // 处理标签页切换
  const handleTabChange = useCallback((num: number) => {
    // 重置病友圈模式
    setPatientCircleMode(false);
    
    switch (num) {
      case TabIndex.HOME:
        navigate("/");
        setActiveNum(TabIndex.HOME);
        break;
      case TabIndex.PATIENT_CIRCLE:
        setPatientCircleMode(true);
        navigate("/BpatientCircle/BpatientCircleHome");
        setActiveNum(TabIndex.PATIENT_CIRCLE);
        break;
      case TabIndex.VIDEO:
        navigate("/CvideoPage");
        setActiveNum(TabIndex.VIDEO);
        break;
      case TabIndex.PATIENT_CIRCLE_WRITE:
        setPatientCircleMode(false);
        navigate("/BpatientCircle/BpatientCircleWrite");
        setActiveNum(TabIndex.PATIENT_CIRCLE);
        break;
      default:
        break;
    }
  }, [navigate]);

  // 处理病友圈特殊逻辑
  const handlePatientCircleClick = useCallback(() => {
    if (patientCircleMode) {
      // 当前在首页，切换到发布页面
      setPatientCircleMode(false);
      navigate("/BpatientCircle/BpatientCircleWrite");
      setActiveNum(TabIndex.PATIENT_CIRCLE);
    } else {
      // 当前在发布页面，切换到首页
      setPatientCircleMode(true);
      navigate("/BpatientCircle/BpatientCircleHome");
      setActiveNum(TabIndex.PATIENT_CIRCLE);
    }
  }, [patientCircleMode, navigate]);

  // 根据路径自动设置激活状态
  useEffect(() => {
    const currentTab = getCurrentTabIndex(pathname);
    setActiveNum(currentTab);
    
    // 根据路径设置病友圈模式
    if (pathname.includes("/BpatientCircle/BpatientCircleWrite")) {
      setPatientCircleMode(false);
    } else if (pathname.includes("/BpatientCircle")) {
      setPatientCircleMode(true);
    }
  }, [pathname, getCurrentTabIndex]);

  // 获取图标源
  const getIconSrc = useCallback((tabItem: TabItem): string => {
    return activeNum === tabItem.index ? tabItem.activeIcon : tabItem.icon;
  }, [activeNum]);

  return (
    <div className="big_box">
      <div className="Tabbar_box">
        {tabItems.map((tabItem) => (
          <img
            key={tabItem.index}
            src={getIconSrc(tabItem)}
            onClick={() => {
              if (tabItem.index === TabIndex.PATIENT_CIRCLE) {
                handlePatientCircleClick();
              } else {
                handleTabChange(tabItem.index);
              }
            }}
            className={tabItem.className}
            alt={`${tabItem.className} tab`}
          />
        ))}
      </div>
    </div>
  );
});

export default TabbarComponent;
